<template>
  <!-- 标的要素 -->
  <div>
    <div class="flex items-center justify-between mt-[30px] mb-[20px]">
      <div class="flex items-center">
        <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
        <div class="ml-[10px] text-[#EF6800]  font-bold" style="font-size: 16px">
          标的要素
        </div>
      </div>
    </div>

    <el-form-item label="项目名称" prop="name">
      <el-input
        placeholder="须如实填写，不承保劳务分包和劳务清包"
        style="width: 318px"
        class="w-[318px]"
        v-model="Info.name"
      ></el-input>
    </el-form-item>
    <el-form-item label="方案" prop="name">
      <el-select v-model="Info.fanan">
        <el-option
          v-for="item in fananList"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="房屋建筑结构" prop="name" v-if="route.query.id != 1">
      <el-input
        placeholder="请选择房屋建筑结构"
        v-model="Info.structure"
        style="width: 318px"
        class="w-[318px]"
      ></el-input>
    </el-form-item>

    <div class="flex" v-if="route.query.id != 1">
      <el-form-item label="施工面积" prop="name">
        <el-input
          placeholder="请输入施工面积"
          v-model="Info.area_num"
          style="width: 318px"
          class="w-[318px]"
        ></el-input>
      </el-form-item>
      <span class="text-[#F00505] ml-[10px] mt-[5px]" style="font-size: 15px"
        >注：本产品规定施工面积不得超过2000平米。仅承保位于购物中心或写字楼等现代化钢筋混凝土建筑物内部的装修项目。</span
      >
    </div>

    <el-form-item label="项目所在地" prop="name" v-if="route.query.id != 1">
      <div class="flex">
        <div>
          <el-select v-model="Info.province" @change="handleProvinceSelect">
            <el-option
              v-for="item in regionData"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <span class="ml-[5px]">省/直辖市</span>
        </div>
        <!-- :disabled="!address!.province || cityList!.length == 0" -->
        <div class="ml-[60px]">
          <el-select
            v-model="Info.city"
            :disabled="!Info.province || cityList!.length == 0"
            @change="handleCitySelect"
          >
            <el-option
              v-for="item in cityList"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <span class="ml-[5px]">市</span>
        </div>
        <div class="ml-[60px]">
          <el-select
            v-model="Info.area"
            :disabled="
              !Info!.province || !Info!.city || areaList!.length == 0
            "
            @change="handleAreaSelect"
          >
            <el-option
              v-for="item in areaList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span class="ml-[5px]">区</span>
        </div>
      </div>
    </el-form-item>

    <el-form-item label="施工详细地址" prop="name">
      <el-select v-model="Info.address" @change="seleceChange">
        <el-option
          v-for="item in arrressList"
          :label="item.address"
          :value="item"
        />
      </el-select>

      <!-- <el-input
        placeholder="请输入施工详细地址"
        style="width: 318px"
        v-model="Info.address_id"
        class="w-[318px]"
      ></el-input> -->
    </el-form-item>

    <el-form-item label="商铺号/房间号" prop="name">
      <el-input
        placeholder="请输入商铺号/房间号"
        style="width: 318px"
        v-model="Info.room_no"
        class="w-[318px]"
      ></el-input>
    </el-form-item>
    <el-form-item label="职业类别" prop="name" v-if="route.query.id == 1">
      <el-select v-model="Info.address">
        <el-option
          v-for="item in arrressList"
          :label="item.address"
          :value="item"
        />
      </el-select>
    </el-form-item>
  </div>
</template>
<script setup lang="ts">
import {
  defineProps,
  PropType,
  defineExpose,
  defineEmits,
  reactive,
  ref,
  watchEffect,
  computed,
  ComputedRef,
} from "vue";
import { codeToText } from "element-china-area-data";
import { homeGetAddress } from "@/utils/api";
import { regionData } from "element-china-area-data";
import { useRoute } from "vue-router";
const props = defineProps({
  treetop: { type: Object }, //数据回显
  fananList: { type: Array },
});
interface CityList {
  label: string;
  value: string;
}
interface infoType {
  name: string;
  structure: string;
  area_num: string;
  province: string;
  city: string;
  area: string;
  address_id: string;
  room_no: string;
  fanan: string;
  address: string;
}
const Info = reactive<infoType>({
  name: "",
  structure: "",
  area_num: "",
  province: "",
  city: "",
  area: "",
  address_id: "",
  room_no: "",
  fanan: "",
  address: "",
});
const route = useRoute();
const arrressList = ref([] as any[]);
const fananList = ref([] as any[]);
interface AreaList {
  label: string;
  value: string;
}
interface RegionData {
  label: string;
  value: string;
}

watchEffect(() => {
  if (props.treetop) {
    let key: keyof infoType;
    for (key in Info) {
      Info[key] = props.treetop[key];
    }
  }
  if (props.fananList) {
    fananList.value = props.fananList;
  }
});
const getData = async () => {
  const res = await homeGetAddress("");
  // console.log(res);
  arrressList.value = res.msg;
};
getData();
//抛出地址
// const emit = defineEmits<{
//   (
//     e: "getAddress",
//     data: {
//       code: string[]; //区域码
//       name: string[]; //汉字
//       isComplete: boolean; //是否选择完整，方便校验
//     }
//   ): void;
//   (e: "handleProvinceSelect"): void;
//   (e: "handleCitySelect"): void;
//   (e: "handleAreaSelect"): void;
// }>();

// const handleProvinceSelect = (_: any) => {
//   emit("handleProvinceSelect");
//   emit("getAddress", {
//     code: [props.address?.province], //区域码
//     name: [codeToText[props.address?.province]], //汉字
//     isComplete: false,
//   });
// };
// const handleCitySelect = () => {
//   emit("handleCitySelect");
//   emit("getAddress", {
//     code: [props.address?.city], //区域码
//     name: [codeToText[props.address?.city]], //汉字
//     isComplete: false,
//   });
// };
// const handleAreaSelect = () => {
//   emit("handleAreaSelect");
//   emit("getAddress", {
//     code: [props.address?.province, props.address?.city, props.address?.area], //区域码
//     name: [
//       codeToText[props.address?.province],
//       codeToText[props.address?.city],
//       codeToText[props.address?.area],
//     ], //汉字
//     isComplete: true,
//   });
//   Info.province = codeToText[props.address?.province];
//   Info.city = codeToText[props.address?.city];
//   Info.area = codeToText[props.address?.area];
// };
const address = reactive<{
  province: string;
  city: string;
  area: string;
}>({
  province: "",
  city: "",
  area: "",
});
interface AreaList {
  value: string;
  label: string;
  children?: AreaList[];
}
//切换省份函数
const handleProvinceSelect = () => {
  // address.city = "";
  // address.area = "";
  Info.city = "";
  Info.area = "";
};
// const getAddress = ({
//   name,
// }: {
//   code: string[];
//   name: string[];
//   isComplete: boolean;
// }) => {
//   console.log(name);
// };
//切换城市函数
const handleCitySelect = (val: any) => {
  // address.area = "";
  Info.area = "";
  Info.city = val;
  // console.log(val);
};
//切换地区函数
const handleAreaSelect = () => {};
//二级城市列表
const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!Info.province) {
    return [];
  }

  let temp = regionData.find((item: any) => {
    return item.label == Info.province;
  });

  return temp!.children ? temp!.children : [];
});
const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!Info.province || !Info.city) {
    return [];
  }
  if (cityList.value.length == 0) {
    return [];
  } else {
    //  console.log(cityList.value);

    let temp = cityList.value.find((item: any) => {
      return item.label == Info.city;
    });

    if (temp) {
      // console.log(temp);

      return temp.children ? temp.children : [];
    } else {
      return [];
    }
  }
});

//详细地址选中
const seleceChange = (v: any) => {
  Info.address_id = v.id;
  Info.address = v.address;
};
defineExpose({
  //   handleProvinceSelect,
  Info,
});
</script>
